<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid red;"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById('canvas')
			var cxt = canvas.getContext('2d')
			canvas.width = 400
			canvas.height = 300
			cxt.font = "bold 30px 微软雅黑"//默认字体尺寸为10px
			cxt.fillStyle = 'red'
			cxt.strokeStyle = 'blue'
			cxt.strokeText("金华职业技术学院", 50, 50)//起点为左下角
			cxt.font = "bold 35px 华文琥珀"
			cxt.fillText("金华职业技术学院", 50, 150)
			cxt.font = "bold 35px 宋体"
			cxt.fillText("金华职业技术学院", 50, 250, 100);//第三个数字决定填充宽度
			var text = "计算机203"
			var length = cxt.measureText(text).width
//			console.log("文本宽度为" + length + "px")
			
			var xPosition = canvas.width/2 - length/2
			cxt.fillText(text, xPosition, 290)
		</script>
	</body>
</html>
